<template>
  <!-- 
    https://blog.csdn.net/qq_44166697/article/details/108274625
      1.作用: 让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式, 适用于 父组件 ==> 子组件

      2.分类: 默认插槽, 具名插槽, 作用于插槽

      3.使用方式:

          1.默认插槽:

            父组件中:

              <category title="美食">
                <img style="width:100%" src="./img/1.png" alt="">
              </category>

            子组件中:
              <div class="category">
                <h3>{{title}}</h3>
                <slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot> 
              </div>

          2.具名插槽:

            父组件中:

              <category title="游戏">
                <template slot="center">
                  <div>html1</div>
                </template>
                <template slot="foot">
                  <div>html2</div>
                </template>
              </category>

            子组件中:
              <div class="category">
                <slot name="center">我是一些默认值,当使用者没有传递具体结构时,我会出现1</slot> 
                <slot name="foot">我是一些默认值,当使用者没有传递具体结构时,我会出现1</slot> 
              </div>

          3.作用于插槽:
              
              1.理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。
              (games数据在category组件中,但使用数据所遍历出来的结构由App组件决定)

              2.代码:

                父组件中:

                  <category title="游戏">
                  <template scope="atguigu">
                    <ul >
                      <li v-for="(item, index) in atguigu.games" :key="index">{{ item }}</li>
                    </ul>
                    <h4>{{ atguigu.msg }}</h4>
                  </template>
                </category>
                
                子组件中:
                  <slot :games="games" msg="你好">默认内容</slot>
   -->
  <div class="app">
    <category title="游戏">
      <template scope="atguigu">
        <ul >
          <li v-for="(item, index) in atguigu.games" :key="index">{{ item }}</li>
        </ul>
      </template>
    </category>

    <category title="游戏">
      <!-- 解构赋值写法 -->
      <template scope="{games}"> 
        <!-- <template scope="rr">  -->
        <ol>
          <li v-for="(item, index) in games" :key="index">{{ item }}</li>
        </ol>
      </template>
    </category>
    <category title="游戏" >
      <!-- <template scope="at"> -->
        <template slot-scope="at">
        <h4 v-for="(item, index) in at.games" :key="index">{{ item }}</h4 >
        <h4>{{ at.msg }}</h4>
      </template>
    </category>

  </div>
</template>

<script>
import category from './components/category.vue'
  export default {
    name: 'App',
    components: {
      category
    },

  }
</script>

<style>
  .app {
    display: flex;
    justify-content: space-around;
  }
  .foot {
    display: flex;
    justify-content: space-around;
  }
</style>